import React from 'react'
import { useComponentsStore } from '../../stores/components.tsx'
import type { Component } from '../../stores/components.tsx'
import {useComponentConfigStore} from '../../stores/component-config.tsx'

export default function Prview() {
    const { components } = useComponentsStore()
    const {componentConfig} = useComponentConfigStore()
    function renderComponents(components: Component[]): React.ReactNode {//因为函数返回的是一个dom结构，所以使用React内置的ReactNode类型限制
        return components.map((component: Component) => {//拿到json数据进行遍历
            const config = componentConfig?.[component.name]//找到json数据中name在componentConfig中对应的组件
            if (!config?.prod) {//如果当前名字没有对应的组件
                return null
            }
            //渲染组件
            return React.createElement(config.prod, {
                key: component.id,//必须添加的key属性
                id: component.id,
                name: component.name,
                styles: component.styles,//组件的样式
                ...config.defaultProps,//组件的默认属性
                ...component.props,//组件的更新属性,会覆盖默认属性

            },
                renderComponents(component.children || [])//递归渲染整个json树，就是一直向下渲染它的子组件，知道没有为止
            )
        })
    }
    return (
        <div>
            {renderComponents(components)}
        </div>
    )
}
